<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="19">
        <div id="box">
          <el-row>
            <el-col :span="12">
              <el-input placeholder="请输入 班级名称、教师名称、学生名称、开班年份、开班季节，开班类型" size="small"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="el-icon-plus" size="small">添加班级</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="6" style="margin-top: 1rem;" v-for="item in classList" :key="item.classId">
              <div class="classCard">
                <el-row>
                  <el-col :span="12">
                    <div class="classCard-img">
                      <img src="../assets/img/bolema_class_default.jpg" />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="classCard-classify">
                      <div>高校</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <div class="classCard-className">{{item.clazz.name}}</div>
                </el-row>
                <div style="width: 100%; border-bottom: 1px dashed #dcdee2; margin-left: -0.5rem;"></div>
                <el-row>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">教师：</span></el-col>
                      <el-col :span="19"><span class="classCard-lable-centent">{{item.teacher.name}}</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">人数：</span></el-col>
                      <el-col :span="19"><span class="classCard-lable-centent">{{item.studentNumber}}人</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">计划：</span></el-col>
                      <el-col :span="19" v-if="item.clazz.class_serial_number!==''"><span class="classCard-lable-centent" style="color: #2d8cf0;">{{item.clazz.class_serial_number}}</span></el-col>
                      <el-col :span="19" v-else><span class="classCard-lable-centent" style="color: #2d8cf0;">暂无教学进度计划</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">类型：</span></el-col>
                      <el-col :span="19"><span class="classCard-lable-centent">{{item.openTypeName}}</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">状态：</span></el-col>
                      <el-col :span="19" v-if="item.clazz.rate!==0"><span class="classCard-lable-centent">进行中</span></el-col>
                      <el-col :span="19" v-else><span class="classCard-lable-centent">已完结</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">进展：</span></el-col>
                      <el-col :span="19"><span class="classCard-lable-centent">{{item.clazz.rate*100}}%</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <el-col :span="5"><span class="classCard-lable-title">校区：</span></el-col>
                      <el-col :span="19" v-if="item.clazz.timetable!==''"><span class="classCard-lable-centent">{{item.clazz.timetable}}</span></el-col>
                      <el-col :span="19" v-else><span class="classCard-lable-centent">暂无校区分配</span></el-col>
                    </el-row>
                  </div>
                  <div class="classCard-lable">
                    <el-row>
                      <i class="el-icon-arrow-up"></i>
                    </el-row>
                  </div>
                </el-row>
                <div style="width: 100%; border-bottom: 1px dashed #dcdee2; margin-left: -0.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem;"></div>
                <el-row type="flex" justify="center">
                  <el-col :span="4"><span class="active">学生</span></el-col>
                  <el-col :span="5"><span class="active">统计</span></el-col>
                  <el-col :span="5"><span class="active">考试</span></el-col>
                  <el-col :span="5"><span class="active">上课</span></el-col>
                  <el-col :span="5"><span class="active">编辑</span></el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      active: {
        getSelfClass: 'LearningPlatform/manager/class/getSelfClass'
      },
      classList: []
    }
  },
  components: {

  },
  methods: {
    selfClass () {
      http.xhrGet(this, this.active.getSelfClass, null, (res) => {
        this.classList = res.data.data.list
      })
    }
  },
  mounted () {
    this.selfClass()
  }
}
</script>

<style scoped="scoped">
  @import url("../assets/css/classManage.css");
</style>
